<template>
	<view class="page-content">
		<u-navbar title=" " :background="background" :border-bottom="false" :is-back="false">

		</u-navbar>
		<view class="p12">

			<view class="u-p-b-40 u-f-item u-f-jsb" v-if="isLogin" @click="toPage('/pages/user/setting/info')">
				<view class="u-f-item">
					<u-avatar size="120" :src="userInfo.avatar"></u-avatar>
					<view class="pl8">
						<view class="fz16 u-font-bold">{{userInfo.name}}</view>
						
						
						<view class="mt8 u-f-item">
							<view class="fz12 c6">手机号码 {{userInfo.mobile || ''}}</view>
						</view>
					</view>
				</view>
				<view class="u-flex">
					<u-icon class="fz16" name="arrow-right" color="#666"></u-icon>
				</view>
			</view>
			<view class="u-p-15 u-f-item u-f-jsb" v-else @click="toLogin">
				<view class="u-f-item">
					<u-avatar size="90"></u-avatar>
					<view class="u-p-l-20">
						<view class="u-font-30 u-font-bold">登录注册</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#D9D9D9"></u-icon>
			</view>

			
			<view class="mt18 module-vip" @click="toPage('/pages/user/vip/index')">
				<image class="bg-vip" src="https://diy.cdevelopment.cn/admin-api/infra/file/18/get/349ebf947f710e0ddfaa275edf673577bf617442e4179351cc591ee998caab18.png" mode="aspectFill"></image>
				<image class="bg-vip-bottom" src="https://diy.cdevelopment.cn/admin-api/infra/file/18/get/0cff8d201dae884e2591746c190e9fee801edcd96595b1fabca36fdf3e8773dd.png" mode="aspectFill"></image>
				
				
				<view class="vip-info u-flex u-f-jsb">
					<view>
						<view class="fz12">普通会员</view>
					</view>
					<view class="btn-vip">
						会员中心
					</view>
				</view>
			</view>
			<view class="u-flex u-f-jsb mt2 pl50 pr50">
				<view class="fz12" style="text-align: center;" @click="toPage('/pages/user/balance/index')">
			
					<view class="fz16 u-font-bold">{{ userInfo.balance || 0 }}</view>
					<view class="mt10">购物金</view>
				</view>
				<view class="fz12" style="text-align: center;" @click="toPage('/pages/point/index')">
			
					<view class="fz16 u-font-bold">{{ userInfo.point || 0 }}</view>
					<view class="mt10">积分</view>
				</view>
				<view class="fz12" style="text-align: center;" @click="toPage('/pages/user/coupon/index')">
			
					<view class="fz16 u-font-bold">{{ userInfo.couponCanUseCount || 0 }}</view>
					<view class="mt10">优惠券</view>
				</view>
			</view>
			<view class="mt20" >
				
				<u-swiper @change="bannerChange" @click="toBanner(curBanner)" name="picUrl" :list="bannerList" height="140">
				</u-swiper>
			</view>
			
			<view class="mt25">
				<view class="u-flex u-f-jsb" @click="toPage('/pages/user/order/index')">
					<view class="c0 u-font-bold fz14">我的订单</view>
					<view class="u-flex fz12">
						全部订单
						<u-icon name="arrow-right" color="#000"></u-icon>
					</view>
				</view>
				<view class="mt15">
					<view class=" u-flex" style="background:rgba(25,41,28,0.05);">
						<view class="pt12 pb12 u-f1" style="position: relative;" v-for="(item, index) in orderList"
							:key="index" @click="toPage(item.path)">
							<image :src="item.img" style="width:48rpx;height: 48rpx;display: block;margin: 0 auto;">
							</image>
							<view class="fz12 c6 u-flex u-f-justify mt6">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mt25">
				<view class="fz14 u-font-bold ">常用功能</view>
				<view class="u-flex pb20" style="flex-wrap: wrap;">
					<view class="mt22" style="position: relative;width: 25%;min-width: 25%;text-align: center;"
						v-for="(item, index) in actionList" :key="index" @click="toPage(item.path)">

						<image :src="item.img" mode="heightFix"
							style="height:80rpx;margin: 0 auto 28rpx;display: block;"></image>
						<view class="fz13">{{ item.title }}</view>
						<button class="kefu-btn" open-type="contact" v-if="item.path=='kefu'">
							联系客服
						</button>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar active-color="#70B52C" @change="tabbarChange" v-model="curTab" :list="tabbarList"
			:mid-button="true"></u-tabbar>
		
	</view>
</template>

<script>
	import {
		apiBaseUrl
	} from '../../config/config.js';
	import {
		getPlatform
	} from '@/config/util.js'
	export default {
		data() {
			return {
				isLogin: false,
				apiBaseUrl,
				bgUrl: 'https://byq.cdevelopment.cn/admin-api/infra/file/18/get/66a575bc7c7803bc80bd32cc7bfb6fac81841de3450070113fbde6e079d39359.png',
				background: {
					background: '#F8FBF9;'
				},
				showType: false,
				userInfo: {},
				authInfo: {},
				recharge_switch: '0',
				walletInfo: {},
				imCount: {},
				curTab: 4,
				brokerageInfo: {},
				companyInfo: {},
				bannerList: [],
				orderList: [{
					title: '待付款',
					path: '/pages/user/order/index?tab=1',
					img: '../../static/image/order1.png'

				}, {
					title: '待发货',
					path: '/pages/user/order/index?tab=2',
					img: '../../static/image/order2.png'

				}, {
					title: '待收货',
					path: '/pages/user/order/index?tab=3',
					img: '../../static/image/order3.png'

				}, {
					title: '已完成',
					path: '/pages/user/order/index?tab=3',
					img: '../../static/image/order4.png'

				}],
				actionList: [{
					title: '收货地址',
					path: '/pages/user/address/index',
					img: '../../static/image/act1.png'

				}, {
					title: '我的作品',
					path: '/pages/user/works/index',
					img: '../../static/image/act2.png'

				}, {
					title: '邀请奖励',
					path: '/pages/user/invite/index',
					img: '../../static/image/act3.png'

				}, {
					title: '专属客服',
					path: 'kefu',
					img: '../../static/image/act4.png'

				}, {
					title: '我的赠品',
					path: '/pages/user/gift/index',
					img: '../../static/image/act5.png'

				}, {
					title: '售后政策',
					path: '6',
					img: '../../static/image/act6.png'

				}, {
					title: '用户协定',
					path: '/pages/user/article/index?id=3',
					img: '../../static/image/act7.png'

				}, {
					title: '账号安全',
					path: '/pages/user/setting/info?type=phone',
					img: '../../static/image/act8.png'

				}],
			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.tabbarList || '';
			},
		},
		onLoad() {},
		onShow() {
			
			
			this.$api.adList({
				position: 3
			}, res => {
				if (res.code == 200) {
					this.bannerList = res.data;
				}
			})
			if (this.$db.get("userToken")) {
				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.isLogin = true
						this.userInfo = res.data;
					}
				})

			}
		},
		methods: {

			toLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			// 关于我们
			goAgreement() {
				let articleId = this.$store.state.config.about_article_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},
			toPage(url) {
				if (url == '6') {
					this.goArticleInfo(url)
					return
				}
				if (!this.isLogin) {

					this.$common.errorToShow('请先登录！')
					uni.navigateTo({
						url: '/pages/login/index'
					})
				} else {
					if (url == '/pages/user/car/index') {

						this.$api.vehicleList({}, res => {
							if (res.code == 200) {
								if (res.data.total) {
									uni.navigateTo({
										url: '/pages/user/car/index'
									})
								} else {

									uni.navigateTo({
										url: '/pages/user/car/none'
									})
								}
							}
						})

						return
					}
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		width: 144rpx;
		height: 50rpx;
		text-align: center;
		color: #fff;
		line-height: 50rpx;
		background: #ABC7C9;
		border-radius: 40px;
	}

	.bg-shaw {
		box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.08);
	}


	.kefu-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: 0;
	}

	.module-vip {
		position: relative;

		.bg-vip {
			display: block;
			width: 100%;
			height: 140rpx;
		}
		.bg-vip-bottom{
			
				position: absolute;
				bottom: 0;
				z-index: 1;
				left: 0;
				right: 0;
				height: 48rpx;
				width: 100%;
		}
		.vip-info {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			color: #fff;
			padding:24rpx 36rpx;
		}

		.btn-vip {
			background: linear-gradient( 135deg, #FEFEFE 0%, #C1F3FA 50%, #A5DAFA 100%);
			border-radius: 16rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 24rpx;
			color:#19291C;
			padding: 10rpx 24rpx;
		}
	}

	.btn-edit {
		background: #E57718;
		border-radius: 27rpx;
		font-family: Source Han Sans CN;
		font-size: 26rpx;
		color: #fff;
		padding: 8rpx 30rpx;

	}

	.line {
		width: 702px;
		height: 4px;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}
</style>